<template>
	<el-tabs v-model="dangQianTab">
		<el-tab-pane label="站点设置" name="diYi">
			<el-form :model="sheZhiBiaoDan" :rules="sheZhiYanZheng" ref="sheZhiBiaoDan" label-width="100px">
				<el-form-item label="网站名称" prop="biaoTi">
					<el-input v-model="sheZhiBiaoDan.biaoTi"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="faBuSheZhiXinXi('sheZhiBiaoDan')">修改</el-button>
					<el-button @click="chongZhiSheZhi">取消</el-button>
				</el-form-item>
			</el-form>
		</el-tab-pane>
		<el-tab-pane label="用户设置" name="diEr">
			<el-form :model="yongHuBiaoDan" :rules="yongHuYanZheng" ref="yongHuBiaoDan" label-width="100px">
				<el-form-item label="用户名" prop="mingZi">
					<el-input v-model="yongHuBiaoDan.mingZi"></el-input>
				</el-form-item>
				<el-form-item label="用户密码" prop="miMa" autocomplete="off">
					<el-input show-password v-model="yongHuBiaoDan.miMa"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="faBuYongHuXinXi('yongHuBiaoDan')">修改</el-button>
					<el-button @click="chongZhiYongHu('yongHuBiaoDan')">取消</el-button>
				</el-form-item>
			</el-form>
		</el-tab-pane>
	</el-tabs>
</template>
<script>
	export default {
		data() {
			return {
				dangQianTab: 'diYi',
				sheZhiBiaoDan: {
					biaoTi: '',
				},
				yongHuBiaoDan: {
					mingZi: '',
					miMa: ''
				},
				sheZhiYanZheng: {
					biaoTi: [{
							required: true,
							message: '请输入网站名称',
							trigger: 'blur'
						},
						{
							min: 3,
							max: 8,
							message: '长度在 3 到 8 个字符',
							trigger: 'blur'
						}
					],
				},
				yongHuYanZheng: {
					mingZi: [{
						required: true,
						message: '请输入账号',
						trigger: 'blur'
					},
					{
						min: 3,
						max: 8,
						message: '长度在 3 到 8 个字符',
						trigger: 'blur'
					}],
					miMa: [{
						required: true,
						message: '请输入密码',
						trigger: 'blur'
					},
					{
						min: 6,
						max: 8,
						message: '长度在 6 到 8 个字符',
						trigger: 'blur'
					}]
				}
			};
		},
		inject:['zhuJiDiZhi'],
		methods: {
			sheZhiShuJu() {
				let vm = this;
				fetch(vm.zhuJiDiZhi + 'sytht/jieKou/chaSheZhi', {
						method: 'get',
						headers: {
							'Content-Type': 'application/json'
						},
						mode: 'cors',
						credentials: 'include'
					})
					.then(function(a) {
						return a.json();
					})
					.then(function(json) {
						Object.assign(vm.sheZhiBiaoDan, json[0])
					})
			},
			yongHuShuJu() {
				let vm = this;
				fetch(vm.zhuJiDiZhi + 'sytht/jieKou/chaYongHu', {
						method: 'get',
						headers: {
							'Content-Type': 'application/json'
						},
						mode: 'cors',
						credentials: 'include'
					})
					.then(function(a) {
						return a.json();
					})
					.then(function(b) {
						vm.yongHuBiaoDan.mingZi = b[0].mingZi
					})
			},
			faBuSheZhiXinXi(biaoDanMing) {
				let vm = this;
				let data = vm.sheZhiBiaoDan;
				vm.$refs[biaoDanMing].validate(async (valid) => {
					if (valid) {
						await fetch(vm.zhuJiDiZhi + 'sytht/jieKou/gaiSheZhi', {
								method: 'post',
								body: JSON.stringify(data),
								headers: {
									'Content-Type': 'application/json'
								},
								mode: 'cors',
								credentials: 'include'
							})
							.then(function(a) {
								return a.text();
							})
							.then(function(b) {
								if (b.includes('登录页面')) {
									b = '请登录';
								};
								alert(b)
								console.log(b)
							})
						vm.sheZhiShuJu()
					} else {
						console.log('发布错误!!');
						return false;
					}
				});
			},
			faBuYongHuXinXi(biaoDanMing) {
				let vm = this;
				let data = vm.yongHuBiaoDan;
				vm.$refs[biaoDanMing].validate(async (valid) => {
					if (valid) {
						await fetch(vm.zhuJiDiZhi + 'sytht/jieKou/gaiYongHu', {
								method: 'post',
								body: JSON.stringify(data),
								headers: {
									'Content-Type': 'application/json'
								},
								mode: 'cors',
								credentials: 'include'
							})
							.then(function(a) {
								return a.text();
							})
							.then(function(b) {
								if (b.includes('登录页面')) {
									b = '请登录';
								};
								alert(b)
								console.log(b)
							})
						vm.yongHuShuJu()
					} else {
						console.log('发布错误!!');
						return false;
					}
				});
			},
			chongZhiSheZhi() {
				this.sheZhiShuJu();
			},
			chongZhiYongHu(biaoDanMing) {
				this.$refs[biaoDanMing].resetFields();
				this.yongHuShuJu();
			}
		},
		mounted() {
			this.sheZhiShuJu();
			this.yongHuShuJu()
		}
	}
</script>
<style scoped>
	.el-tabs {
		padding-left: 20px;
	}
	.el-input {
		width: auto;
	}
</style>
